<template>
  <div
    ref="containerTagget"
    class="
      relative
      p-1
      rounded-xl
      border-white
      duration-500
      hover:bg-red-100/40
    "
  >
    <div class="group">
      <x-svg-icon
        name="search"
        class="w-1.5 h-1.5 absolute translate-y-[-50%] top-[50%] left-2"
        color="#707070"
      ></x-svg-icon>
      <input
        @focus="onFocusHandler"
        :value="modelValue"
        @input="onInput"
        @keydown.enter="clickSearchBtn"
        type="text"
        class="
          block
          w-full
          h-[44px]
          pl-3
          outline-0
          bg-zinc-100
          caret-zinc-400
          rounded-xl
          text-zinc-900
          tracking-wide
          text-sm
          font-semibold
          border border-zinc-100
          duration-500
          focus:border-red-300
          group-hover:bg-white group-hover:border-zinc-200
        "
        placeholder="搜索"
      />
      <x-button
        @click="clickSearchBtn"
        icon="search"
        class="absolute translate-y-[-50%] top-[50%] right-1 rounded-full"
        iconColor="#fff"
      ></x-button>
    </div>
    <transition name="slide">
      <div
        v-if="$slots.dropdown"
        v-show="isFocus"
        class="
          max-h-[368px]
          w-full
          text-base
          overflow-auto
          bg-white
          absolute
          z-20
          left-0
          top-[58px]
          p-2
          rounded
          border border-zinc-200
          duration-200
          hover:shadow-2xl
        "
      >
        <slot name="dropdown"></slot>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { onClickOutside } from "@vueuse/core";
import { ref } from "vue-demi";
const props = defineProps({
  modelValue: {
    require: true,
    default: "",
    type: String,
  },
});
const emits = defineEmits(["clickSearch", "update:modelValue"]);
const isFocus = ref(false);
const onInput = (val) => {
  emits("update:modelValue", val.target.value);
};
const onFocusHandler = () => {
  isFocus.value = true;
};
const clickSearchBtn = () => {
  emits("clickSearch");
};
// 点击指定元素以外的地方执行
const containerTagget = ref(null);
onClickOutside(containerTagget, () => {
  isFocus.value = false;
});
</script>

<style scoped lang="scss">
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}
.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateY(40px);
}
</style>